import React, { Component } from 'react'
import './App.css'
import Header from './component/Header';
import List from './component/List'
import Footer from './component/Footer'


export default class App extends Component {
  //初始化
  state = {
    todos: [
      { id: '001', name: '吃饭', done: true },
      { id: '002', name: '睡觉', done: true },
      { id: '003', name: '写代码', done: false },
    ],
  }
  //接受子组件Header的数据
  addTodo = (todoObj) => {
    //获取原数据
    const { todos } = this.state
    //追加数据
    const newTodos = [todoObj, ...todos]
    //更新状态
    this.setState({
      todos: newTodos
    })

  }
  //接受从Item组件传的数据(勾选)
  changeTodo = (id, done) => {
    //获取todos
    const { todos } = this.state
    //加工数据
    const newTodos = todos.map((item) => {
      if (item.id === id) return { ...item, done: done }
      else return item
    })
    this.setState({ todos: newTodos })
  }
  //接受从Item组件传的数据(删除)
  deleteTode = (id) => {
    const { todos } = this.state
    const newTodes = todos.filter((item) => {
      return item.id !== id
    })
    this.setState({ todos: newTodes })
  }
  //全选
  checkAllTode = (done) => {
    const { todos } = this.state
    const newTodes = todos.map((item) => {
      return { ...item, done: done }
    })
    this.setState({
      todos: newTodes
    })
  }
  //清除已完成的
  clearAllDone = () => {
    const { todos } = this.state
    const clearTodo = todos.filter((item) => {
      return item.done !== true
    })
    this.setState({ todos: clearTodo })
  }

  render() {
    const { todos } = this.state
    return (
      <div className="todo-container" >
        <div className="todo-wrap">
          <Header addData={this.addTodo}></Header>
          {/* <List todos={this.state.todos}></List> */}
          <List todos={todos} changeTodo={this.changeTodo} deleteTode={this.deleteTode}></List>
          <Footer todos={todos} checkAllTode={this.checkAllTode} clearAllDone={this.clearAllDone}></Footer>
        </div>
      </div >
    );
  }
}